<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>指标卡管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		.quota-name{
		    font-size:20px;
		    color:#3e4148;
		    padding: 15px 20px;
		    font-weight: 800;
		}
		.quota-content{
		    padding: 80px 20px;
		    text-align: center;
		    font-size:50px;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#minordata").change(function(){
				if(!$(this).prop("checked")){
				 	return confirmx("取消次轴会清除已经配置的全部次轴信息",function(){
						$(".minorList").addClass("hide");
						//直接remove的话，del_flag没有得到改变，后台无法正确删除
						//$(".minorList #minorList").children().remove();
						$(".minorList #minorList tr").addClass("hide");
						$(".minorList #minorList .delFlag").val("1");
						$("#minoraxis").select2("val","");
						$("#minorType").select2("val","1");
						$(obj).prop("checked",false);
					});
				}
				else{
					$(".minorList").removeClass("hide");
				}
			});
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		function submitForm(){
			var flag = true;
			if($("#inputForm").valid()){
				var url = "${ctx}/ins/insQuota/save";
				var data = $("#inputForm").serialize();
	            $.ajax({
	                type: 'POST',
	                url : url,
	                async:false,
	                data: data,             //获取表单数据
	                success : function(data) {
	                	$("#id").val(data);
	                },
	                error : function(data){
	                	alertx("无权限");
	                }
	            });
			}else{
				flag = false;
			}
			return flag;
		}
		function selectTable(){
			var id = $("#id").val();
			var url = "${ctx}/ins/insQuota/selectTable?id="+id;
			top.$.jBox.open("iframe:"+url, "工作表选择",710,$(top.document).height()-420,{
                buttons:{"提交":"ok", "关闭":true}, bottomText:"工作表选择",submit:function(v, h, f){
                    var code;
                    if (v=="ok"){
                    	// 执行保存
                        //loading('正在提交，请稍等...');
                    	/* var flag = h.find("iframe")[0].contentWindow.submitForm();
                    	if(flag){
                    		//location.reload();
                    	} */
                    	var name = h.find("iframe")[0].contentWindow.submitForm();
                    	if(name != false){
                    		location.href = name;
                    	}
                        return false;
                    }
                }, loaded:function(h){
                    $(".jbox-content", top.document).css("overflow-y","hidden");
                }
            });
		}
		function addRow(list, idx, tpl, row){
			$(list).append(Mustache.render(tpl, {
				idx: idx, delBtn: true, row: row
			}));
			$(list+idx).find("select").each(function(){
				$(this).val($(this).attr("data-value"));
			});
			$(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
				var ss = $(this).attr("data-value").split(',');
				for (var i=0; i<ss.length; i++){
					if($(this).val() == ss[i]){
						$(this).attr("checked","checked");
					}
				}
			});
		}
		function delRow(obj, prefix){
			var id = $(prefix+"_id");
			var rid = $(prefix+"_rid");
			var delFlag = $(prefix+"_delFlag");
			var frequently = $(prefix+"_frequently");
			if (id.val() == ""){
				$(obj).parent().parent().remove();
			}else if(delFlag.val() == "0"){
				delFlag.val("1");
				$(obj).html("&divide;").attr("title", "撤销删除");
				$(obj).parent().parent().addClass("error");
			}else if(delFlag.val() == "1"){
				delFlag.val("0");
				$(obj).html("&times;").attr("title", "删除");
				$(obj).parent().parent().removeClass("error");
			}
		}
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/ins/insQuota/list?dashboard.id=${insQuota.dashboard.id}">图表列表</a></li>
		<shiro:hasPermission name="ins:insQuota:edit">
			<li class="active"><a href="javascript:void(0);">图表添加</a></li>
		</shiro:hasPermission>
	</ul>
	<form:form id="inputForm" modelAttribute="insQuota" action="${ctx}/ins/insQuota/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<input id="newForm" value="${newForm}" type="hidden"/>
		<input id="dashboardId" value="${insQuota.dashboard.id}" name="dashboard.id" type="hidden"/>
		<sys:message content="${message}"/>		
		<div class="control-group">
			<label class="control-label">指标名称：</label>
			<div class="controls">
				<form:input path="name" htmlEscape="false" maxlength="64" class="input-xlarge required"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">工作表：</label>
			<div class="controls">
				<input type="text" class="input-xlarge" readonly value="${table.name}"/>
				<input type="hidden" value="${table.id}" name="table.id"/>
				<input class="btn btn-primary" onclick="return confirmx('切换工作表将清空当前图表配置，确定吗？',selectTable);" type="button" value="切换工作表" />
				<input type="checkbox" id="minordata" value="1"  name="hasMinor" >次轴</input>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">维度：</label>
			<div class="controls">
				<!-- x轴类型 -->
				<input type="hidden" id="xaxisTypeHidden" value="${insQuota.xaxis.type}"/>
				<select id="xaxis" name="xaxis" class="input-xlarge">
					<option value="">---请选择---</option>
					<option value="createDate" type="3" <c:if test="${insQuota.xaxis.id=='createDate'}">selected</c:if>>单据时间</option>
					<c:forEach items="${notNumberFields}" var="field">
						<option value="${field.id}" type="${field.type}" <c:if test="${insQuota.xaxis.id==field.id}">selected</c:if>>${field.name}</option>
					</c:forEach>
				</select>
				<select id="dateType" name="dateType" class="input-large hide">
					<option value="">---请选择---</option>
					<option value="1" <c:if test="${insQuota.dateType=='1'}">selected</c:if>>年</option>
					<option value="2" <c:if test="${insQuota.dateType=='2'}">selected</c:if>>季度</option>
					<option value="3" <c:if test="${insQuota.dateType=='3'}">selected</c:if>>月</option>
					<option value="4" <c:if test="${insQuota.dateType=='4'}">selected</c:if>>周</option>
					<option value="5" <c:if test="${insQuota.dateType=='5'}">selected</c:if>>日</option>
					<option value="6" <c:if test="${insQuota.dateType=='6'}">selected</c:if>>时</option>
					<option value="7" <c:if test="${insQuota.dateType=='7'}">selected</c:if>>分</option>
					<option value="8" <c:if test="${insQuota.dateType=='8'}">selected</c:if>>秒</option>
				</select>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">数值：</label>
			<div class="controls">
				<table id="contentTable" style="width:46%" class="table table-striped table-bordered table-condensed">
						<thead>
							<tr>
								<th class="hide"></th>
								<th>参数名称</th>
								<th>统计方式</th>
								<th>小数位数</th>
							</tr>
						</thead>
						<tbody id="yaxisList">
						</tbody>
					</table>
					<script type="text/template" id="yaxisTpl">//<!--
						<tr id="yaxisList{{idx}}">
							<td class="hide">
								<input id="yaxisList{{idx}}_id" name="yaxisList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="yaxisList{{idx}}_delFlag" name="yaxisList[{{idx}}].delFlag" class="delFlag" type="hidden" value="0"/>
							</td>
							<td>
								<input id="yaxisList{{idx}}_name" readonly type="text" value="{{row.field.name}}" name="yaxisList[{{idx}}].field.name" maxlength="64" class="input-mini required"/>
								<input id="yaxisList{{idx}}_field" type="hidden" class="fid" value="{{row.field.id}}" name="yaxisList[{{idx}}].field.id"/>
							</td>
							<td>
								<select id="yaxisList{{idx}}_algorithm" name="yaxisList[{{idx}}].algorithm" data-value="{{row.algorithm}}" class="input-small required">
									<option value="1">求和</option>
									<option value="2">平均</option>
									<option value="3">中位数</option>
									<option value="4">最大值</option>
									<option value="5">最小值</option>
								</select>
							</td>
							<td>
								<select id="yaxisList{{idx}}_digit" name="yaxisList[{{idx}}].digit" data-value="{{row.digit}}" class="input-small required">
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
									<option value="5">6</option>
								</select>
							</td>
						</tr>//-->
					</script>
					
				<select id="yaxis" multiple="true"  name="yaxis" class="input-xlarge required">
					<option value="">---请选择---</option>
					<c:forEach items="${numberFields}" var="field">
						<option value="${field.id}" >${field.name}</option>
					</c:forEach>
				</select>
				<select id="yaxisType"  name="yaxisType" class="input-large required">
					<option value="1" <c:if test="${insQuota.yaxisType=='1'}">selected</c:if>>折线图</option>
					<option value="2" <c:if test="${insQuota.yaxisType=='2'}">selected</c:if>>簇状柱形图</option>
					<option value="3" <c:if test="${insQuota.yaxisType=='3'}">selected</c:if>>堆积柱形图</option>
					<option value="4" <c:if test="${insQuota.yaxisType=='4'}">selected</c:if>>条形图</option>
					<option value="5" <c:if test="${insQuota.yaxisType=='5'}">selected</c:if> disabled="">饼图</option>
					<option value="6" <c:if test="${insQuota.yaxisType=='6'}">selected</c:if> disabled="">计量图</option>
					<option value="7" <c:if test="${insQuota.yaxisType=='7'}">selected</c:if> disabled="">指标卡</option>
				</select>
			</div>
		</div>
		<div id="settingValueDiv" class="control-group settingValue hide">
			<label class="control-label">设定值：</label>
			<div class="controls">
				<table id="settingValueTable" style="width:46%" class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th class="hide"></th>
							<th>类型</th>
							<th colspan="2">值</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="hide">
							</td>
							<td>
								<select id="settingValueType" data-value="${insQuota.settingValue.valueType}" name="settingValue.valueType" onchange="auxiliarytypechange(this);">
									<option value="1">固定值</option>
									<option value="2">计算值</option>
								</select>
							</td>
							<td class="value">
								<input id="settingValueFinalValue" name="settingValue.finalValue" type="text" value="${insQuota.settingValue.finalValue}" maxlength="64" class="input-mini number"/>
								<select id="settingValueField" data-value="${insQuota.settingValue.field.id}" name="settingValue.field.id" class="input-small field hide">
								</select>
								<select id="settingValueDynamicValue" data-value="${insQuota.settingValue.dynamicValue}" name="settingValue.dynamicValue" class="input-small hide">
									<option value="1">最大值</option>
									<option value="2">最小值</option>
									<option value="3">平均值</option>
									<option value="4">求和</option>
									<option value="5">众数</option>
									<option value="6">中位数</option>
									<option value="7">中列数</option>
									<option value="9">极差</option>
									<option value="10">四分位数极差</option>
									<option value="11">方差</option>
									<option value="12">绝对平均偏差</option>
									<option value="13">中位数绝对偏差</option>
									<option value="14">标准差</option>
								</select>
							</td>
							<td>
								<input type="checkbox" id="enableSettingValue" name="enableSettingValue" value="1" <c:if test="${insQuota.enableSettingValue=='1'}">checked</c:if>>启用设定值</input>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="control-group">
			<br/>
			<label class="control-label">辅助线：</label>
			<div class="controls">
				<input class="btn btn-primary" type="button" value="+" onclick="addauxiliary('yinsauxiliarylist');"/>
			</div>
			<br/>
			<div class="controls">
				<table id="contentTable" style="width:46%" class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th class="hide"></th>
							<th>类型</th>
							<th colspan="2">值</th>
							<th></th>
							</tr>
					</thead>
					<tbody id="yinsauxiliarylist">
					</tbody>
				</table>
				<script type="text/template" id="yauxiliaryTpl">//<!--
						<tr id="yauxiliaryList{{idx}}">
							<td class="hide">
								<input id="yauxiliaryList{{idx}}_id" name="yauxiliaryList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="yauxiliaryList{{idx}}_delFlag" class="delFlag" name="yauxiliaryList[{{idx}}].delFlag" type="hidden" value="0"/>
							</td>
							<td>
								<select id="yauxiliarytype" data-value="{{row.valueType}}" name="yauxiliaryList[{{idx}}].valueType" onchange="auxiliarytypechange(this);">
									<option value="1">固定值</option>
									<option value="2">计算值</option>
								</select>
							</td>
							<td class="value">
								<input id="yauxiliaryList{{idx}}_finalvalue" name="yauxiliaryList[{{idx}}].finalValue" type="text" value="{{row.finalValue}}" maxlength="64" class="input-mini number"/>
								<select id="yauxiliaryList{{idx}}_field" data-value="{{row.field.id}}" name="yauxiliaryList[{{idx}}].field.id" class="input-small field hide">
								</select>
								<select id="yauxiliaryList{{idx}}_dynamicvalue" data-value="{{row.dynamicValue}}" name="yauxiliaryList[{{idx}}].dynamicValue" class="input-small hide">
									<option value="1">最大值</option>
									<option value="2">最小值</option>
									<option value="3">平均值</option>
									<option value="4">求和</option>
									<option value="5">众数</option>
									<option value="6">中位数</option>
									<option value="7">中列数</option>
									<option value="9">极差</option>
									<option value="10">四分位数极差</option>
									<option value="11">方差</option>
									<option value="12">绝对平均偏差</option>
									<option value="13">中位数绝对偏差</option>
									<option value="14">标准差</option>
								</select>
							</td>
							<td>
							<input class="btn btn-primary" type="button" value="-" onclick="removeauxiliary(this);"/>
							</td>
						</tr>//-->
					</script>
			</div>
		</div>
		<div class="control-group minorList hide">
			<label class="control-label">次轴：</label>
			<div class="controls">
			<table id="contentTable" style="width:46%" class="table table-striped table-bordered table-condensed">
						<thead>
							<tr>
								<th class="hide"></th>
								<th>参数名称</th>
								<th>统计方式</th>
								<th>小数位数</th>
							</tr>
						</thead>
						<tbody id="minorList">
						</tbody>
					</table>
					<script type="text/template" id="minorTpl">//<!--
						<tr id="minorList{{idx}}">
							<td class="hide">
								<input id="minorList{{idx}}_id" name="minorList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="minorList{{idx}}_delFlag" class="delFlag" name="minorList[{{idx}}].delFlag" type="hidden" value="0"/>
							</td>
							<td>
								<input id="minorList{{idx}}_name" readonly type="text" value="{{row.field.name}}" maxlength="64" name="minorList[{{idx}}].field.name" class="input-mini"/>
								<input id="minorList{{idx}}_field" type="hidden" class="fid" value="{{row.field.id}}" name="minorList[{{idx}}].field.id"/>
							</td>
							<td>
								<select id="minorList{{idx}}_algorithm" name="minorList[{{idx}}].algorithm" data-value="{{row.algorithm}}" class="input-small">
									<option value="1">求和</option>
									<option value="2">平均</option>
									<option value="3">中位数</option>
									<option value="4">最大值</option>
									<option value="5">最小值</option>
								</select>
							</td>
							<td>
								<select id="minorList{{idx}}_digit" name="minorList[{{idx}}].digit" data-value="{{row.digit}}" class="input-small">
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
									<option value="6">6</option>
								</select>
							</td>
						</tr>//-->
					</script>
				<select id="minoraxis" name="minoraxis" class="input-xlarge select2" multiple="multiple">
					<option value="">---请选择---</option>
					<c:forEach items="${numberFields}" var="field">
						<option value="${field.id}" >${field.name}</option>
					</c:forEach>
				</select>
				<select id="minorType"  name="minorType" class="input-large">
					<option <c:if test="${insQuota.minorType=='1'}">selected</c:if> value="1">折线图</option>
					<option <c:if test="${insQuota.minorType=='2'}">selected</c:if> value="2">簇状柱形图</option>
					<option <c:if test="${insQuota.minorType=='3'}">selected</c:if> value="3">堆积柱形图</option>
					<option <c:if test="${insQuota.minorType=='4'}">selected</c:if> value="4">条形图</option>
				</select>
			</div>
			<br/>
			<label class="control-label">辅助线：</label>
			<div class="controls">
				<input class="btn btn-primary" type="button" value="+" onclick="addauxiliary('minsauxiliarylist');"/>
			</div>
			<br/>
			<div class="controls">
				<table id="contentTable" style="width:46%" class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th class="hide"></th>
							<th>类型</th>
							<th colspan="2">值</th>
							<th></th>
							</tr>
					</thead>
					<tbody id="minsauxiliarylist">
					</tbody>
				</table>
				<script type="text/template" id="mauxiliaryTpl">//<!--
						<tr id="mauxiliaryList{{idx}}">
							<td class="hide">
								<input id="mauxiliaryList{{idx}}_id" name="mauxiliaryList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="mauxiliaryList{{idx}}_delFlag" class="delFlag" name="mauxiliaryList[{{idx}}].delFlag" type="hidden" value="0"/>
							</td>
							<td>
								<select id="mauxiliarytype" data-value="{{row.valueType}}" name="mauxiliaryList[{{idx}}].valueType" onchange="auxiliarytypechange(this);">
									<option value="1">固定值</option>
									<option value="2">计算值</option>
								</select>
							</td>
							<td class="value">
								<input id="mauxiliaryList{{idx}}_finalvalue" name="mauxiliaryList[{{idx}}].finalValue" type="text" value="{{row.finalValue}}" maxlength="64" class="input-mini number"/>
								<select id="mauxiliaryList{{idx}}_field" data-value="{{row.field.id}}" name="mauxiliaryList[{{idx}}].field.id" class="input-small field hide">
								</select>
								<select id="mauxiliaryList{{idx}}_dynamicvalue" data-value="{{row.dynamicValue}}" name="mauxiliaryList[{{idx}}].dynamicValue" class="input-small hide">
									<option value="1">最大值</option>
									<option value="2">最小值</option>
									<option value="3">平均值</option>
									<option value="4">求和</option>
									<option value="5">众数</option>
									<option value="6">中位数</option>
									<option value="7">中列数</option>
									<option value="9">极差</option>
									<option value="10">四分位数极差</option>
									<option value="11">方差</option>
									<option value="12">绝对平均偏差</option>
									<option value="13">中位数绝对偏差</option>
									<option value="14">标准差</option>
								</select>
							</td>
							<td>
							<input class="btn btn-primary" type="button" value="-" onclick="removeauxiliary(this);"/>
							</td>
						</tr>//-->
					</script>
			</div>
		</div>
		<%-- <div class="control-group">
			<label class="control-label">创建时间起：</label>
			<div class="controls">
				<input name="dateFrom" id="startTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
    					value="${insQuota.dateFrom}"
    					onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true,maxDate:'#F{$dp.$D(\'endTime\')}'});"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">创建时间止：</label>
			<div class="controls">
				<input name="dateTo" id="endTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
   					value="${insQuota.dateTo}"
   					onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true,minDate:'#F{$dp.$D(\'startTime\')}'});"/>
			</div>
			<!-- <input type="button" id="btn">test</input> -->
		</div> --%>
		<!-- <div id="main" style="width: 600px;height:400px;"></div> -->
		<div class="form-actions">
			<shiro:hasPermission name="ins:insQuota:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
		<div id="main" style="width: 600px;height:400px;"></div>
		<!-- 专门用于显示指标卡的div -->
		<div id="mainQuota" style="width: 600px;height:400px;display:none;">
			<div class="quota-name">
				<span id="dataName"></span>
			</div>
			<div class="quota-content">
				<span id="dataArea"></span>
			</div>
		</div>
	</form:form>
	<script type="text/javascript">
						var myChart = echarts.init(document.getElementById('main'));
						var yauxiliaryRowIdx = 0, yauxiliaryTpl = $("#yauxiliaryTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
						var mauxiliaryRowIdx = 0, mauxiliaryTpl = $("#mauxiliaryTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
						function auxiliarytypechange(obj){
							switch($(obj).val())
							{
								case "1":
									$(obj).closest("tr").children("td.value").children("input").removeClass("hide");
									$(obj).closest("tr").children("td.value").children("select").addClass("hide");
									break;
								case "2":
									$(obj).closest("tr").children("td.value").children("input").addClass("hide");
									$(obj).closest("tr").children("td.value").children("select").removeClass("hide");
									break;
							}
						}
						function removeauxiliary(obj){
							$(obj).parent().siblings(".hide").children(".delFlag").val("1");
							$(obj).parent().parent().addClass("hide");
							chart();
						}
						function addauxiliary(did,data){
							switch(did)
							{
								case "yinsauxiliarylist":
									if($("#yaxis").select2("data").length==0){
										alertx("还未选择任何数值轴");
										return;
									}
									$("#"+did).append(Mustache.render(yauxiliaryTpl, {
										idx: yauxiliaryRowIdx, delBtn: true, row: (data||{})
									}));
									$.each($("#yaxis").select2("data"),function(i,n){
										$("#"+did + " #yauxiliaryList"+yauxiliaryRowIdx +"_field").append("<option value='"+ n.id +"'>"+ n.text +"</option>");
									});
									if(data!=null || data != undefined || data != ""){
										$("#yauxiliaryList"+yauxiliaryRowIdx).find("select").each(function(i,n){
											$(n).val($(n).attr("data-value")).trigger("change");
										});
									}
									yauxiliaryRowIdx++;
									break;
								case "minsauxiliarylist":
									if($("#minordata").prop("checked")==false){
										return;
									}
									if($("#minoraxis").select2("data").length==0){
										alertx("还未选择任何次轴");
										return;
									}
									$("#"+did).append(Mustache.render(mauxiliaryTpl, {
										idx: mauxiliaryRowIdx, delBtn: true, row: (data||{})
									}));
									$.each($("#minoraxis").select2("data"),function(i,n){
										$("#"+did + " #mauxiliaryList"+mauxiliaryRowIdx +"_field").append("<option value='"+ n.id +"'>"+ n.text +"</option>");
									});
									if(data!=null || data != undefined || data != ""){
										$("#mauxiliaryList"+mauxiliaryRowIdx).find("select").each(function(i,n){
											$(n).val($(n).attr("data-value")).trigger("change");
										});
									}
									mauxiliaryRowIdx++;
									break;
							}
							$("input[type=text]").on("blur",function(){
								chart();
							});
							chart();
						}
						var yaxisRowIdx = 0, yaxisTpl = $("#yaxisTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
						var minorRowIdx = 0, minorTpl = $("#minorTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
						$(document).ready(function() {
							//所有数字字段，放在下拉列表中
							var numberFields = ${fns:toJson(numberFields)};
							var data = ${fns:toJson(insQuota.yaxisList)};
							var minordata = ${fns:toJson(insQuota.minorList)};
							var yauxiliaryList = ${fns:toJson(insQuota.yauxiliaryList)};
							var mauxiliaryList = ${fns:toJson(insQuota.mauxiliaryList)};
							//数值参数下拉选择事件，只有这一个途径增加一行
							$("#yaxis,#minoraxis").on("select2-selecting",function(e){
								for(var i=0;i<numberFields.length;i++){
									if(e.val == numberFields[i].id){
										var row = jQuery.extend(true, {}, numberFields[i]); 
										row.field= {};
										row.field.id=row.id;
										row.field.name=row.name;
										row.rid=row.id;
										switch($(this).attr("id"))
										{
											case "yaxis":
												addRow('#yaxisList', yaxisRowIdx, yaxisTpl, row);
												$("#yinsauxiliarylist select.field").each(function(i,n){
													$(n).append("<option value='"+e.object.id+"'>"+e.object.text+"</option>");
												});
												$("#settingValueField").append("<option value='"+e.object.id+"'>"+e.object.text+"</option>");
												yaxisRowIdx = yaxisRowIdx + 1;
												break;
											case "minoraxis":
												addRow('#minorList', minorRowIdx, minorTpl, row);
												$("#minsauxiliarylist select.field").each(function(i,n){
													$(n).append("<option value='"+e.object.id+"'>"+e.object.text+"</option>");
												});
												minorRowIdx++;
												break;
										}
									}
								}
							});
							$("#yaxis,#minoraxis").on("select2-removed",function(e){
								switch($(this).attr("id"))
								{
									case "yaxis":
										$("#yaxisList .fid").each(function(){
											if($(this).val()==e.val){
												var obj = $(this).parent();
												$(obj).parent().addClass("hide");
												$(obj).siblings(".hide").children(".delFlag").val(1);
											}
										});
										if($(this).select2("data").length==0){
											$("#yinsauxiliarylist").children().remove();
											$("#settingValueField").children().remove();
										}
										else{
											$("#yinsauxiliarylist select.field").each(function(i,n){
												$(n).children("option[value='"+e.val+"']").remove();
												$("#settingValueField").children("option[value='"+e.val+"']").remove();
											});
										}
										break;
									case "minoraxis":
										$("#minorList .fid").each(function(){
											if($(this).val()==e.val){
												var obj = $(this).parent();
												$(obj).parent().addClass("hide");
												$(obj).siblings(".hide").children(".delFlag").val(1);
											}
										});
										if($(this).select2("data").length==0){
											$("#minsauxiliarylist").children().remove();
										}
										else{
											$("#minsauxiliarylist select.field").each(function(i,n){
												$(n).children("option[value='"+e.val+"']").remove();
											});
										}
										break;
								}
							});
							
							var arr = new Array();
							for (var i=0; i<data.length; i++){
								arr[i]=data[i].field.id;
								addRow('#yaxisList', yaxisRowIdx, yaxisTpl, data[i]);
								yaxisRowIdx = yaxisRowIdx + 1;
							}
							var select2 = $("#yaxis").select2();
							select2.val(arr).trigger("change");
							select2.change();
							arr = new Array();
							for (var i=0; i<minordata.length; i++){
								arr[i]=minordata[i].field.id;
								addRow('#minorList', minorRowIdx, minorTpl, minordata[i]);
								minorRowIdx++;
							}
							select2 = $("#minoraxis").select2();
							select2.val(arr).trigger("change");
							select2.change();
							if(minordata.length>0){
								$("#minordata").prop("checked",true);
								$("#minordata").trigger("change");
							}
							for(var i = 0;i< yauxiliaryList.length;i++){
								addauxiliary("yinsauxiliarylist",yauxiliaryList[i]);
							}
							for(var i = 0;i< mauxiliaryList.length;i++){
								addauxiliary("minsauxiliarylist",mauxiliaryList[i]);
							}
							//控制饼图是否可选
							//规则：当维度未选中，或者维度选中，数值只有一个的时候可选
							if($("#xaxis").val()==""||$("#yaxis option:selected").length<=1){
								$("#yaxisType option[value='5']").removeAttr("disabled");
							}
							//控制计量图和指标卡是否可选
							//规则：维度未选中，且数值只有一个的时候可选
							if($("#xaxis").val()=="" && $("#yaxis option:selected").length<=1){
								$("#yaxisType option[value='6']").removeAttr("disabled");
								$("#yaxisType option[value='7']").removeAttr("disabled");
							}
							$.each($("#yaxis").select2("data"),function(i,n){
								$("#settingValueField").append("<option value='"+ n.id +"'>"+ n.text +"</option>");
							});
							//y数值切换事件，用于控制设定值div是否可见
							$("#yaxisType").change(function(){
								if($(this).val()=='6'){
									$("#settingValueDiv").removeClass("hide");
								}else{
									$("#settingValueDiv").addClass("hide");
								}
							});
							if($("#yaxisType").val()=='6'){
								$("#settingValueDiv").removeClass("hide");
							}else{
								$("#settingValueDiv").addClass("hide");
								
							}
							$("#settingValueType").val($("#settingValueType").attr("data-value")).trigger("change");
							$("#settingValueField").val($("#settingValueField").attr("data-value")).trigger("change");
							$("#settingValueDynamicValue").val($("#settingValueDynamicValue").attr("data-value")).trigger("change");
							//点击启用设定值时，根据id是否为空，动态修改该条记录该字段，并且实时生成计量图
							$("#enableSettingValue").click(function(){
								
								if(!$(this).prop("checked")){
									var id = $("#id").val();
									var url = "${ctx}/ins/insQuota/updateEnableSettingValue";
									if(id != ""){
										$.ajax({
			                				type: 'POST',
			                				url : url,
			                				async:false,
			                				data: {"id":id},            
			                				success : function(data) {
			                				},
			                				error : function(data){
			                					alertx("无权限");
			                				}
			            				});
									}
								}
								chart();
							});
							$("input[type=text]").on("blur",function(){
								chart();
							});
						});
						function chart(init){
							var url = "${ctx}/ins/insQuota/getData";
							var data = $("#inputForm").serialize();
							if(init){
								data = {};
							}
            				$.ajax({
                				type: 'POST',
                				url : url,
                				async:false,
                				data: data,             //获取表单数据
                				success : function(data) {
                					var option = $.parseJSON(data);
                					//说明是指标卡
                					if(option.quota){
                						$("#dataArea").html(option.value);
                						$("#dataName").html(option.name);
                						$("#main").hide();
                						$("#mainQuota").show();
                					}else{
	                					var seriesLength = option.series.length;
	                					myChart.clear();
	                					if(seriesLength>0){
	                						if(option.yAxis){
	            	    						option.yAxis.axisLabel={
	            	    					            margin: 2,
	            	    					            formatter: function (value, index) {
	            	    					            	var val = Math.abs(value);
	            	    					                if (val >= 1000 && val < 1000000) {
	            	    					                    value = value / 1000 + "K";
	            	    					                } else if (val >= 1000000) {
	            	    					                    value = value / 1000000 + "M";
	            	    					                }
	            	    					                return value;
	            	    					            }
	            	    					        };
	                						}
		                					myChart.setOption(option);
	                					}
                						$("#main").show();
                						$("#mainQuota").hide();
                					}
                				},
                				error : function(data){
                					alertx("无权限");
                				}
            				});
						}
						$("select").live("change",function(e){
							//控制饼图是否可选
							//规则：当维度未选中，或者维度选中，数值只有一个的时候可选
							if($("#xaxis").val()==""||$("#yaxis option:selected").length<=1){
								$("#yaxisType option[value='5']").removeAttr("disabled");
							}else{
								if($("#yaxisType").val()==5){
									$("#yaxisType").select2("val","1");
									$("#yaxisType").val("1");
								}
								$("#yaxisType option[value='5']").attr("disabled","");
							}
							//控制计量图是否可选
							//规则：当维度未选中，且数值只有一个的时候可选
							if($("#xaxis").val()=="" && $("#yaxis option:selected").length<=1){
								$("#yaxisType option[value='6']").removeAttr("disabled");
								$("#yaxisType option[value='7']").removeAttr("disabled");
							}else{
								if($("#yaxisType").val()==6||$("#yaxisType").val()==7){
									$("#yaxisType").select2("val","1");
									$("#yaxisType").val("1");
									$("#settingValueDiv").addClass("hide");
								}
								$("#yaxisType option[value='6']").attr("disabled","");
								$("#yaxisType option[value='7']").attr("disabled","");
							}
							chart();
						});
						//根据维度值初始化日期类型是否显示
						var xaxisType = $("#xaxisTypeHidden").val();
						if(xaxisType=="3"||xaxisType=="4"||xaxisType=="5"){
							$("#dateType").removeClass("hide");
						}
						$("#xaxis").on("change",function(){
							var type = $(this).find("option:selected").attr("type");
							if(type=="3"||type=="4"||type=="5"){
								$("#dateType").removeClass("hide");
							}else{
								$("#dateType").addClass("hide");
								$("#dateType").select2("val","");
							}
						});
						//初始化页面的时候，调用一次图表显示方法
						if($("#newForm").val()){
							chart(true);
						}else{
							chart();
						}
	</script>
</body>
</html>